<template>
    <div>
        <button @click="updateState">修改状态</button>
        
    </div>
</template>

<script>
    import { reactive, ref, readonly } from 'vue';

    export default {
        setup() {
            // 普通对象
            const info1 = {
                name: 'leon'
            }

            const readOnlyInfo1 = readonly(info1); 

            // 响应式的对象
            const info2 = reactive({
                name: 'leon'
            })
            const readOnlyInfo2 = readonly(info2); 

            // ref
            const info3 = ref('leon');
            const readOnlyInfo3 = readonly(info3);

            const updateState = () => {
                // readOnlyInfo1.name = 'why';
                // readOnlyInfo2.name = 'why';
                readOnlyInfo3.value = 'why';

                
                // info1.name = 'why';
                // info2.name = 'luffy';
                // console.log(info1.name);
                // console.log(info2.name);
                // info3.name = 'coder';
                // console.log(info3.name);


            }

            return {
                updateState
            }
        }
         
    }
</script>

<style scoped>

</style>